import React, { Component } from 'react'
import './login.scss'
import { Form, Input, Button, message } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';

export default class login extends Component {
  state = {
    username: '',
    Password: ''
  }
  submit = () => {
    alert(`用户名${this.state.username}\n 密码${this.state.Password}`)
    message.success("登陆成功！")
    this.props.history.push('/admin')
  }
  render() {
    const { username, Password } = this.state
    return (
      <div className="login">
        <div className="login-box">
          <div className="login-title">管理员登录</div>
          <Form className="login-form">
            <Form.Item
              className="login-item"
              name="username"
              rules={[
                {
                  required: true,
                  message: '用户名不能为空！！！',
                },
                {
                  min: 4,
                  message: '用户名长度至少4个字符',
                },
                {
                  max: 16,
                  message: '用户名长度最多16个字符',
                },
                {
                  pattern: /^[a-zA-Z]\w{3,16}$/,
                  message: "格式不正确！"
                }
              ]}
            >
              <Input 
              prefix={<UserOutlined className="site-form-item-icon"/>} 
              placeholder="请输入您的用户名" 
              value={username} 
              onChange={(e)=>{this.setState({username:e.target.value.trim()})}}
              />
            </Form.Item>
            <Form.Item
              name="password"
              rules={[
                {
                  required: true,
                  message: '密码不能为空！！！',
                },
                {
                  min: 6,
                  message: '用户名长度至少6个字符',
                },
                {
                  max: 20,
                  message: '用户名长度最多20个字符',
                },
                {
                  pattern: /^(\w){6,20}$/,
                  message: "格式不正确！"
                }
              ]}
            >
              <Input.Password
                value={Password}
                prefix={<LockOutlined className="site-form-item-icon"/>}
                type="password"
                placeholder="请输入您的密码"
                onChange={(e)=>{this.setState({Password:e.target.value.trim()})}}
              />
            </Form.Item>
            <Form.Item>
              <Button type="primary" htmlType="submit" className="login-form-button" onClick={this.submit}>
                登录
              </Button>
            </Form.Item>
          </Form>
        </div>
      </div>
    )
  }
}
